<template>
    <div>
        <el-row>
            <el-col :span="18" style="text-align: left; margin-top: 5px;">
                <el-form :inline="true" :model="searchNo" class="demo-form-inline">
                    <el-form-item label="设备型号">
                        <el-input v-model="searchNo.no" placeholder="请输入设备型号" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-input v-model="searchNo.name" placeholder="请输入设备名称" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchLikeNo()">查询</el-button>
                        <el-button type="primary" @click="clearNo()">清空</el-button>
                        <el-button type="primary" @click="download()">下载导入模板</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-upload class="upload-demo" action="http://localhost:8080/buycheck/importExcel" :headers="{ ContentType: 'multipart/form-data' }" :show-file-list="false" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload">
                            <el-button type="primary">导入</el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="4" style="text-align: left; margin-top: 5px;">
                <font style="font-size: 24px;">未审核清单</font>
            </el-col>
        </el-row>
        <el-table :data="buyCheckNoList" border stripe style="width: 100%; height: 310px;">
            <el-table-column prop="id" label="订单编号" width="100">
            </el-table-column>
            <el-table-column prop="no" label="设备型号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="120">
            </el-table-column>
            <el-table-column prop="buysum" label="采购数量" width="120">
            </el-table-column>
            <el-table-column prop="money" label="采购金额(元)" width="120">
            </el-table-column>
            <el-table-column prop="buyman" label="采购人" width="120">
            </el-table-column>
            <el-table-column prop="usedate" label="预计启用日期" width="150">
            </el-table-column>
            <el-table-column prop="description" label="备注" width="240">
            </el-table-column>
            <el-table-column label="审核" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="dialogVisible = true; getId(scope.row.id);">审 核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="18">
                <div class="pagination" style="text-align: center; margin-top: 20px;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChangeNo" :page-size="pageInfo.pageSize" :current-page="pageInfoNo.pageNum" layout="total, prev, pager, next, jumper" :total="pageInfoNo.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="dialogVisible" width="15%">
            <span>
                <font style="font-size: 16px;">确认审核通过？</font>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="check();">确 定</el-button>
            </span>
        </el-dialog>

        <el-row>
            <el-col :span="18" style="text-align: left; margin-top: 5px;">
                <el-form :inline="true" :model="search" class="demo-form-inline">
                    <el-form-item label="设备名称">
                        <el-input v-model="search.name" placeholder="请输入设备名称" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="审批日期">
                        <el-input type="date" v-model="search.checkdate" placeholder="请选择日期" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchLike()">查询</el-button>
                        <el-button type="primary" @click="clear()">清空</el-button>
                        <el-button type="primary" @click="exportExcel()">导出数据</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="4" style="text-align: left; margin-top: 5px;">
                <font style="font-size: 24px;">已审核清单</font>
            </el-col>
        </el-row>
        <!-- @selection-change="handleSelectionChange" -->
        <el-table :data="buyCheckList" border stripe style="width: 100%; height: 290px;">
            <!-- <el-table-column type="selection" width="50">
            </el-table-column> -->
            <el-table-column prop="no" label="设备型号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="120">
            </el-table-column>
            <el-table-column prop="buysum" label="采购数量" width="120">
            </el-table-column>
            <el-table-column prop="money" label="采购金额(元)" width="120">
            </el-table-column>
            <el-table-column prop="buyman" label="采购人" width="120">
            </el-table-column>
            <el-table-column prop="usedate" label="预计启用日期" width="150">
            </el-table-column>
            <el-table-column prop="description" label="备注" width="240">
            </el-table-column>
            <el-table-column prop="checkdate" label="审核日期" width="150">
            </el-table-column>
            <el-table-column prop="checkman" label="审核人" width="120">
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="18">
                <div class="pagination" style="text-align: center; margin-top: 20px;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageInfo.pageSize" :current-page="pageInfo.pageNum" layout="total, prev, pager, next, jumper" :total="pageInfo.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: '',
            dialogVisible: false,
            checkedList: [],
            searchNo: {
                name: "",
                no: ""
            },
            search: {
                name: "",
                checkdate: ""
            },
            buyCheckNoList: [],
            buyCheckList: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 5
            },
            pageInfoNo: {
                pageNum: 1,
                pageSize: 5
            },
            user: {}
        }
    },
    methods: {
        download() {
            this.$axios.get("/buycheck/download", { responseType: 'blob' })
                .then((result) => {
                    let url = window.URL.createObjectURL(new Blob([result.data]));
                    let link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', '采购表.xls');
                    document.body.appendChild(link);
                    link.click();
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        beforeUpload(file) {
            let allowedTypes = [
                "application/vnd.ms-excel",
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            ];
            let isAllowed = allowedTypes.includes(file.type);
            if (!isAllowed) {
                this.$message.error("仅支持上传 Excel 文件（.xls 或 .xlsx）！");
            }
            return isAllowed;
        },
        handleSuccess(response, file) {
            this.$message.success("导入成功！");
            this.showNoList();
        },
        handleError(err, file) {
            this.$message.error("导入失败，请稍后重试！");
        },
        importExcel() {
        },
        exportExcel() {
            this.$axios.get("/buycheck/exportExcel", { responseType: 'arraybuffer' })
                .then((result) => {
                    let blob = new Blob([result.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                    let link = document.createElement("a");
                    let url = window.URL.createObjectURL(blob);
                    link.href = url;
                    link.download = '审核通过表.xls';
                    link.click();
                    window.URL.revokeObjectURL(url);
                }).catch((err) => {
                    console.log(err);
                });
        },
        getId(id) {
            this.id = id;
        },
        check() {
            this.$axios.get("/buycheck/updateCheck?id=" + this.id + "&checkman=" + this.user.name)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            message: result.data.message,
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.showNoList();
                        this.showList();
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        handleSelectionChange(val) {
            this.checkedList = val;
        },
        searchLikeNo() {
            this.$axios.get("/buycheck/searchLikeNo?name=" + this.searchNo.name + "&no=" + this.searchNo.no + "&pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.pageInfoNo = result.data.data;
                        this.buyCheckNoList = result.data.data.list;
                        for (let i = 0; i < this.buyCheckNoList.length; i++) {
                            this.buyCheckNoList[i].usedate = this.buyCheckNoList[i].usedate.substring(0, 10);
                        }
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        clearNo() {
            this.searchNo = {};
            this.showNoList();
        },
        searchLike() {
            this.$axios.get("/buycheck/searchLike?name=" + this.search.name + "&checkdate=" + this.search.checkdate + "&pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.pageInfo = result.data.data;
                        this.buyCheckList = result.data.data.list;
                        for (let i = 0; i < this.buyCheckList.length; i++) {
                            this.buyCheckList[i].usedate = this.buyCheckList[i].usedate.substring(0, 10);
                            this.buyCheckList[i].checkdate = this.buyCheckList[i].checkdate.substring(0, 10);
                        }
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        clear() {
            this.search = {};
            this.showList();
        },
        handleCurrentChangeNo(val) {
            this.pageInfoNo.pageNum = val;
            this.showList();
        },
        handleSizeChangeNo(val) {
            this.pageInfoNo.pageSize = val;
            this.showList();
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val;
            this.showList();
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.showList();
        },
        showNoList() {
            this.$axios.get("/buycheck/selectAllNo?pageNum=" + this.pageInfoNo.pageNum + "&pageSize=" + this.pageInfoNo.pageSize)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.pageInfoNo = result.data.data;
                        this.buyCheckNoList = result.data.data.list;
                        for (let i = 0; i < this.buyCheckNoList.length; i++) {
                            this.buyCheckNoList[i].usedate = this.buyCheckNoList[i].usedate.substring(0, 10);
                        }
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        showList() {
            this.$axios.get("/buycheck/selectAll?pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.pageInfo = result.data.data;
                        this.buyCheckList = result.data.data.list;
                        for (let i = 0; i < this.buyCheckList.length; i++) {
                            this.buyCheckList[i].usedate = this.buyCheckList[i].usedate.substring(0, 10);
                            this.buyCheckList[i].checkdate = this.buyCheckList[i].checkdate.substring(0, 10);
                        }
                    }
                }).catch((err) => {
                    console.log(err);
                });
        }
    },
    mounted() {
        this.user = JSON.parse(localStorage.getItem('user'));
        this.showNoList();
        this.showList();
    },
};
</script>

<style></style>
